The Kendo mobile ButtonGroup widget is a linear set of grouped buttons.

<h3>Getting Started</h3>
<p>The Kendo mobile Application will automatically initialize a mobile ButtonGroup for every element with <code>role</code> data attribute set to <code>buttongroup</code>
present in the views/layouts markup.</p>

<p>Alternatively, it can be initialized using a jQuery selector. The ButtonGroup element may be <code>UL</code> element.</p><div class="code-sample"><h4 class="code-title">Initialize Kendo mobile ButtonGroup based on role data attribute.</h4><pre class="code prettyprint"><code>&lt;ul id="buttongroup" data-role="buttongroup"&gt;
  &lt;li&gt;Option 1&lt;/li&gt;
  &lt;li&gt;Option 2&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><div class="code-sample"><h4 class="code-title">Initialize Kendo mobile ButtonGroup using a jQuery selector</h4><pre class="code prettyprint"><code>var buttongroup = $("#buttongroup").kendoMobileButtonGroup();</code></pre></div><h3>Customizing mobile ButtonGroup appearance</h3>
Every Kendo Mobile ButtonGroup color can be customized by setting its <code>background-color</code> inline or using a CSS selector.<div class="code-sample"><h4 class="code-title">Green Kendo mobile ButtonGroup</h4><pre class="code prettyprint"><code>&lt;ul id="buttongroup" data-role="buttongroup"&gt;
  &lt;li style="background-color: green"&gt;Option1&lt;/li&gt;
  &lt;li style="beckground-color: red"&gt;Option2&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><h3>Button icons</h3>
<p>A Button icon can be set in two ways - either by adding an <code>img</code> element inside the Button <code>a</code> element,
or by setting an <code>icon</code> data attribute to the Button <code>a</code> element.</p>
<p>Kendo mobile comes out of the box with several ready to use icons:</p>

* <ul id="icon-list">
  <li title=".km-about"><span class="km-icon km-about"></span>about</li>
  <li title=".km-action"><span class="km-icon km-action"></span>action</li>
  <li title=".km-add"><span class="km-icon km-add"></span>add</li>
  <li title=".km-bookmarks"><span class="km-icon km-bookmarks"></span>bookmarks</li>
  <li title=".km-camera"><span class="km-icon km-camera"></span>camera</li>
  <li title=".km-cart"><span class="km-icon km-cart"></span>cart</li>
  <li title=".km-compose"><span class="km-icon km-compose"></span>compose</li>
  <li title=".km-contacts"><span class="km-icon km-contacts"></span>contacts</li>
  <li title=".km-details"><span class="km-icon km-details"></span>details</li>
  <li title=".km-downloads"><span class="km-icon km-downloads"></span>downloads</li>
  <li title=".km-fastforward"><span class="km-icon km-fastforward"></span>fastforward</li>
  <li title=".km-favorites"><span class="km-icon km-favorites"></span>favorites</li>
  <li title=".km-featured"><span class="km-icon km-featured"></span>featured</li>
  <li title=".km-featured"><span class="km-icon km-toprated"></span>toprated</li>
  <li title=".km-globe"><span class="km-icon km-globe"></span>globe</li>
  <li title=".km-history"><span class="km-icon km-history"></span>history</li>
  <li title=".km-home"><span class="km-icon km-home"></span>home</li>
  <li title=".km-info"><span class="km-icon km-info"></span>info</li>
  <li title=".km-more"><span class="km-icon km-more"></span>more</li>
  <li title=".km-mostrecent"><span class="km-icon km-mostrecent"></span>mostrecent</li>
  <li title=".km-mostviewed"><span class="km-icon km-mostviewed"></span>mostviewed</li>
  <li title=".km-organize"><span class="km-icon km-organize"></span>organize</li>
  <li title=".km-pause"><span class="km-icon km-pause"></span>pause</li>
  <li title=".km-play"><span class="km-icon km-play"></span>play</li>
  <li title=".km-recents"><span class="km-icon km-recents"></span>recents</li>
  <li title=".km-refresh"><span class="km-icon km-refresh"></span>refresh</li>
  <li title=".km-reply"><span class="km-icon km-reply"></span>reply</li>
  <li title=".km-rewind"><span class="km-icon km-rewind"></span>rewind</li>
  <li title=".km-search"><span class="km-icon km-search"></span>search</li>
  <li title=".km-settings"><span class="km-icon km-settings"></span>settings</li>
  <li title=".km-share"><span class="km-icon km-share"></span>share</li>
  <li title=".km-stop"><span class="km-icon km-stop"></span>stop</li>
  <li title=".km-trash"><span class="km-icon km-trash"></span>trash</li>
</ul>

<p>Additional icons may be added by defining the respective CSS class.
If the <code>icon</code> data attribute is set to <code>custom</code>, the tab will receive <code>km-custom</code> CSS class.
In order to create colorizable icons as the default ones in Kendo UI Mobile, you should specify the icon image as a <b>box mask</b>
(either as dataURI or as a separate image). The image should be <b>PNG8</b> or <b>PNG24</b> with alpha channel (<b>PNG8+Alpha</b> is supported by
only few graphic editors, so <b>better stick with PNG24</b>). The image color is not important - it will be used as a mask only
(BlackBerry 7.0 has a bug that renders its masks as background-image, better use white if you plan to support it. The bug was
fixed in 7.1).</p><div class="code-sample"><h4 class="code-title">Define custom button icon</h4><pre class="code prettyprint"><code>&lt;style&gt;
.km-custom {
  -webkit-mask-box-image: url("foo.png");
}
&lt;/style&gt;

&lt;ul id="buttongroup" data-role="buttongroup"&gt;
  &lt;li data-icon="custom"&gt;Option 1&lt;/li&gt;
  &lt;li&gt;Option 2&lt;/li&gt;
&lt;/ul&gt;</code></pre></div>
